*{
	margin: 0;
	padding: 0;
	list-style: none;
}
body{
	background: url(../img/start.jpg);
	background-repeat: no-repeat;
	background-size: 100% 634px;
	overflow: hidden;
}
.bing{
	width: 400px;
	height: 500px;
	margin: 0 auto;
	background: linear-gradient(-45deg,rgba(0,0,0,0.2),rgba(0,0,0,0.4));
	display: none;
	/*transform: translatey(0);
	transition: 1s;*/
	overflow: hidden;
}
.fish1{
	width: 60px;
	height: 30px;
	margin-top: 24px;
	margin-left: 15px;
	display: inline-block;
	background: url(../img/fish.png);
	background-repeat: no-repeat;
	background-position: -949px -443px;
}
.fish2{
	width: 150px;
	height: 52px;
	margin-top: 24px;
	display: inline-block;
	background: url(../img/fish.png);
	background-repeat: no-repeat;
	background-position: -792px -443px;
}
.bing-top span{
	font-size: 30px;
	font-family:"华文琥珀";
	display: inline-block;
	text-align: center;
	background: linear-gradient(to right,yellow,red);
	-webkit-background-clip: text;
	color: transparent;
	margin-top: 20px;
}
.str{
	margin-top: 86px;
	margin-left: 120px;
	
}
.str1{
	width: 155px;
	height: 55px;
	background: url(../img/btn.png);
	background-repeat: no-repeat;
	background-position: -109px -147px;
	cursor: pointer;
}
.str2{
	width: 155px;
	height: 55px;
	border-radius: 25px;
	border: 2px solid black;
	box-sizing: border-box;
	background: linear-gradient(to bottom,#74cbf9,#017dc3);
	text-align: center;
	line-height: 55px;
	margin-top: 35px;
	cursor: pointer;
}
.str2 a{
	font-size: 27px;
	font-family: "华文琥珀";
	background: linear-gradient(to bottom,yellow,red);
	-webkit-background-clip: text;
	color: transparent;
}
.str3{
	width: 155px;
	height: 55px;
	border-radius: 25px;
	border: 2px solid black;
	box-sizing: border-box;
	background: linear-gradient(to bottom,#74cbf9,#017dc3);
	text-align: center;
	line-height: 55px;
	margin-top: 35px;
	cursor: pointer;
}
.str3 a{
	font-size: 27px;
	font-family: "华文琥珀";
	background: linear-gradient(to bottom,yellow,red);
	-webkit-background-clip: text;
	color: transparent;
}
.bing-intr{
	width: 400px;
	height: 500px;
	margin: 0 auto;
	background: linear-gradient(-45deg,rgba(0,0,0,0.2),rgba(0,0,0,0.4));
	display: none;
	overflow: hidden;
}
.bing-intr h1{
	text-align: center;
	font-size: 27px;
	font-family: "华文琥珀";
	background: linear-gradient(to bottom,yellow,red);
	-webkit-background-clip: text;
	color: transparent;
	margin-top: 15px;
}
.bing-intr ul{
	width: 300px;
	margin: 0 auto;
	margin-top: 15px;
}
.bing-intr ul li{
	font-size: 22px;
	font-family: "华文彩云";
	color: aquamarine;
	margin-bottom: 10px;
}
.back{
	width: 155px;
	height: 55px;
	border-radius: 25px;
	border: 2px solid black;
	box-sizing: border-box;
	background: linear-gradient(to bottom,#74cbf9,#017dc3);
	text-align: center;
	line-height: 55px;
	margin: 0 auto;
	margin-top: 35px;
	cursor: pointer;
}
.back a{
	font-size: 27px;
	font-family: "华文琥珀";
	background: linear-gradient(to bottom,yellow,red);
	-webkit-background-clip: text;
	color: transparent;
}
.checkpoint{
	width: 400px;
	height: 200px;
	background: linear-gradient(-45deg,rgba(0,0,0,0.2),rgba(0,0,0,0.4));
	display: none;
	overflow: hidden;
	position: absolute;
	left: 35%;
	top: 20%;
	text-align: center;
	overflow: hidden;
}
.checkpoint a,em{
	margin-top: 20px;
	display: inline-block;
	font-size: 30px;
	font-family: "华文琥珀";
	color: white;
	font-style: normal;
}
/*.times{
	position: absolute;
	top: 47%;
	left: 46%;
}*/
.times span{
	position: absolute;
	top: 47%;
	left: 45%;
	margin-top: 20px;
	display: none;
	font-size: 30px;
	font-family: "华文琥珀";
	color: white;
}
.times span:first-child{
	display: block;
}
.times span:last-child{
	position: absolute;
	top: 47%;
	left: 42%;
}
/*玩家的鱼*/
.playerFish{
	width: 54px;
	height: 24px;
	background: url(../img/fishin.png);
	background-repeat: no-repeat;
	/*background-position:-647px -734px;*/
	position: absolute;
	top: 20%;
	left: 60%;
	display: none;
	animation-name: playerFish;
	animation-duration: 1.5s;
	animation-timing-function: steps(1,start);
	animation-iteration-count: infinite;
	cursor: pointer;
}
@keyframes playerFish{
	0%{
		background-position-x:0px;
	} 
	10%{
		background-position-x:-54px;
	}
	20%{
		background-position-x:-108px;
	}
	30%{
		background-position-x:-162px;
	}
	40%{
		background-position-x:-216px;
	}
	50%{
		background-position-x:-270px;
	}
	60%{
		background-position-x:-324px;
	}
	70%{
		background-position-x:-378px;
	}
	80%{
		background-position-x:-432px;
	}
	100%{
		background-position-x:0px;
	}
}

.nav{
	display: flex;
	justify-content: space-around;
	opacity: 0;
	margin-top: 5px;
}

/*时间倒计时*/
.game_time{
	width:50px;
	height:50px;
	position:absolute;
	top:1%;
	left:3%;
	text-align:center;
}

/* time scroll*/
.pie{
	width:100px;
	height:100px;
	background-color:blue;
	border-radius:50px;
	position:absolute;
	}
.pie1{
	clip:rect(0px,100px,100px,50px);
	-o-transform:rotate(0deg);
	-moz-transform:rotate(0deg);
	-webkit-transform:rotate(0deg);
	background-color:#fff;
}
.pie2{
	clip:rect(0px,50px,100px,0px);
	-o-transform:rotate(0deg);
	-moz-transform:rotate(0deg);
	-webkit-transform:rotate(0deg);
	background-color:#fff;}
.hold{
	width:100px;
	height:100px;
	position:absolute;
	z-index:1;
	}
.bg{
	width:100px;
	height:100px;
	border-radius:100px;
	position:absolute;
	background-color:#d13c36;
	}
.time{
	width:80px;
	height:80px;
	margin:20px 0 0 20px;
	background-color:#e45534;
	border-radius:80px;
	position:absolute;
	top: -10px;
	left: -10px;
	z-index:1;
	text-align:center;
	line-height:80px;
	font-size:15px;
}
.target{
	font-size: 22px;
	color: white;
}
.targets{
	font-size: 22px;
	color: white;
}
.targets i{
	font-style: normal;
	color: red;
}
.out{
	width: 30px;
	height: 30px;
	overflow: hidden;
	cursor: pointer;
}
.out img{
	width: 100%;
}


/*游动的鱼*/
.swimfish1{
	background: url(../img/fishin2.png);
	background-repeat: no-repeat;
	width: 72px;
	height: 30px;
	position: absolute;
	top:30%;
	left: -120px;
	background-position: 0px 4px;
	animation-name: swinFish1;
	animation-duration: 1.5s;
	animation-timing-function: steps(1,start);
	animation-iteration-count: infinite;
	display: none;
}
@keyframes swinFish1{
	0%{
		background-position-x:0px;
	} 
	20%{
		background-position-x:-73px;
	}
	40%{
		background-position-x:-146px;
	}
	60%{
		background-position-x:-219px;
	}
	80%{
		background-position-x:-292px;
	}
	90%{
		background-position-x:-365px;
	}
	100%{
		background-position-x:0px;
	}
}
.swimfish2{
	background: url(../img/fishin3.png);
	background-repeat: no-repeat;
	width: 88px;
	height: 31px;
	position: absolute;
	right: -180px;
	top:31%;
	background-position: 0px 4px;
	animation-name: swinFish2;
	animation-duration: 1.5s;
	animation-timing-function: steps(1,start);
	animation-iteration-count: infinite;
	display: none;
}
@keyframes swinFish2{
	0%{
		background-position-x:0px;
	} 
	20%{
		background-position-x:-89px;
	}
	40%{
		background-position-x:-178px;
	}
	60%{
		background-position-x:-267px;
	}
	80%{
		background-position-x:-356px;
	}
	90%{
		background-position-x:-445px;
	}
	100%{
		background-position-x:0px;
	}
}
.swimfish3{
	background: url(../img/fishin4.png);
	background-repeat: no-repeat;
	width: 158px;
	height: 62px;
	position: absolute;
	right: -120px;
	top:35%;
	background-position: 0px 4px;
	animation-name: swinFish3;
	animation-duration: 1.5s;
	animation-timing-function: steps(1,start);
	animation-iteration-count: infinite;
	display: none;
}
@keyframes swinFish3{
	0%{
		background-position-x:0px;
	} 
	20%{
		background-position-x:-167px;
	}
	40%{
		background-position-x:-334px;
	}
	60%{
		background-position-x:-501px;
	}
	80%{
		background-position-x:-668px;
	}
	90%{
		background-position-x:-835px;
	}
	100%{
		background-position-x:0px;
	}
}